<template>
    <div id="register-container">
        <div class="content form-content">
            <p class="form-tip">药店注册 | SignUp</p>
            <el-form ref="form" :model="form" label-width="130px" label-position="left">
                <el-form-item label="药店名称">
                    <el-input v-model="form.drugstoreName" placeholder="请输入药店名称" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="form.name" placeholder="请输入用户名" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password" placeholder="请输入密码" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="再次密码">
                    <el-input v-model="form.retestPassword" placeholder="请再次输入密码" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="联系人电话">
                    <el-input v-model="form.contactNumber" style="width: 300px" maxlength="11" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <!-- 营业执照 -->
                <el-form-item label="营业执照">
                    <el-upload
                        class="upload-demo"
                        action=""
                        list-type="picture-card"
                        :on-change="handleChange"
                        :on-remove="handleRemove"
                        :on-preview="handlePreview"
                        :auto-upload="false"
                        :multiple="false"
                        :file-list="attachmentList"
                    >
                        <i slot="default" class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <!-- 药店地址 -->
                <el-form-item label="请输入药店地址">
                    <Address-select
                        ref="Address"
                        @getAddress="getAddress"
                        :provinceName="form.province"
                        :cityName="form.city"
                        :countyName="form.area"
                    >
                    </Address-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.detailedAddress" style="width: 300px" maxlength="100" placeholder="请输入详细地址"></el-input>
                </el-form-item>
                <div class="flex">
                    <el-button class="register-btn" type="primary" @click="submit">注 册</el-button>
                    <el-button class="register-btn" type="default" @click="$router.push('/login')">返 回</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
// import api_work from '../../../api/api_work';
import { upload } from '@/common/util/ossUploadService';
import AddressSelect from '@/components/AddressSelect.vue';
import { Type } from '@/http/interface';
import { api } from '@/http/api';
@Component({
    components: {
        AddressSelect,
    },
})
export default class CorporateAuthenticate extends Vue {
    public $refs: {
        form: HTMLFormElement;
    };
    /**药店信息 */
    public form: Type.PostPharmacyInfoRequest = {
        drugstoreName: '',
        name: '',
        password: '',
        retestPassword: '',
        contactNumber: '',
        certificate: '',
        province: '',
        city: '',
        area: '',
        detailedAddress: '',
    };
    attachmentList = [];
    // 获取 省，市，区
    public getAddress(item) {
        this.form.province = item.province;
        this.form.city = item.city;
        this.form.area = item.area;
    }
    mounted() {}
    beforeDestroy() {}

    /**数据获取 */
    init() {}

    /**图片上传成功 */
    public handleRemove(file, fileList) {
        let index = this.attachmentList.findIndex((v) => v.uid == file.uid);
        this.attachmentList.splice(index, 1);
    }

    public handlePreview(file) {
        var objecturl = window.URL.createObjectURL(file.raw);
        window.open(objecturl, '_blank');
    }

    public async handleChange(file, fileList) {
        //限一张附件
        if (fileList.length > 1) {
            fileList.splice(0, 1);
        } // this.addCost.name = file.name;
        let res = await upload(file.raw, file.name);
        this.form.certificate = res.res.requestUrls[0].split('?')[0];
        console.log('res', res, this.form.certificate);
    }
    /**上传失败 */
    handleFailure() {
        this.$message({
            message: '上传失败！',
            type: 'warning',
        });
    }
    /**判断图片格式 */
    beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
            this.$message.error('上传图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
    }
    /**提交药店认证 */
    submit() {
        this.$refs.form.validate((valid) => {
            if (valid) {
                api.Pharmacy_PostPharmacyInfo(this.form).then(() => {
                    this.$message.success('注册成功');
                    this.$router.push('/login');
                });
            }
        });
    }
}
</script>

<style lang="scss" >
#register-container {
    ul,
    li,
    input,
    p {
        margin: 0;
    }
    width: 100%;
    height: 100%;
    background: url('../assets/img/login_bg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .content {
        width: 600px;
        height: 630px;
        margin: 50px auto;
        padding: 0px 20px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 1px 8px #e1e1e5;
        .form-tip {
            text-align: center;
            font-size: 22px;
            color: #333;
            line-height: 70px;
            border-bottom: 1px solid #f6f5fb;
            font-weight: 600;
        }
        .form-content {
            width: 470px;
            height: 480px;
            margin: 25px auto 5px;
            padding: 0 5px 0 0;
            .danger-txt {
                color: red;
                font-size: 16px;
                font-weight: 800;
                margin-right: 8px;
            }
            .form-input {
                width: 320px;
                height: 48px;
                border-radius: 2px;
                background: #f7f5fb;
                border: none;
                padding-left: 25px;
                color: #606266;
            }
            .tips {
                position: absolute;
                top: 44px;
                left: 24px;
                color: red;
            }
            input::placeholder {
                color: #a1a1a1;
                font-size: 14px;
            }
            input[type='text']:focus {
                outline: none;
                border: 1px solid #0091d8;
            }
            .code-btn {
                position: absolute;
                right: 25px;
                top: 1px;
                button {
                    width: 120px;
                    height: 46px;
                    border: none;
                    color: #fff;
                    background: #0091d8;
                    cursor: pointer;
                }
            }
            select:focus {
                outline: none;
                border: 1px solid #0091d8;
            }
            .agree-tip {
                display: flex;
                justify-content: flex-start;
                padding: 0 0 0 122px;
                font-size: 14px;
                color: #333;
                .agree-txt {
                    color: #0091d8;
                    font-size: 14px;
                }
                a:hover {
                    cursor: pointer;
                }
            }
            .register-btn {
                width: 320px;
                height: 50px;
                background: #0091d8;
                margin: 20px 22px;
                font-size: 18px;
                float: right;
                font-weight: 600;
            }
        }
    }
    .agreeDialog {
        p {
            line-height: 30px;
        }
        .title {
            font-weight: 800;
        }
        li {
            line-height: 25px;
            margin-left: 53px;
        }
    }
}

@media screen and (min-width: 1280px) and (max-width: 1366px) {
    #register-container .content {
        margin: 10px auto;
        height: 450px;
        width: 815px;
    }
    #register-container .content .form-tip {
        font-size: 18px;
        line-height: 50px;
    }
    #register-container .content .form-content {
        margin: 5px auto;
        height: auto;
    }
    #register-container .content .form-content .form-input {
        line-height: 40px;
        font-size: 12px;
        height: 40px;
    }
    #register-container .el-form-item--small.el-form-item {
        margin-bottom: 15px;
    }
    #register-container .el-form-item--small .el-form-item__label {
        font-size: 12px;
    }
    #register-container .content .form-content .code-btn button {
        height: 40px;
    }
    #register-container .content .form-content .tips {
        top: 34px;
        font-size: 12px;
    }
    #register-container .content .form-content .register-btn {
        margin: 10px 20px;
        font-size: 14px;
    }
}
@media screen and (min-width: 1367px) and (max-width: 1600px) {
    #register-container .content {
        margin: 0 auto;
    }
}
.container {
    font-weight: bold;
    .title {
        height: 80px;
        line-height: 80px;
        padding-left: 40px;
        font-size: 18px;
        .subtitle {
            color: #999;
            margin-left: 20px;
        }
        .failurestitle {
            color: #eb6100;
            margin-left: 20px;
        }
    }
    .info-container {
        padding-left: 40px;
        padding-top: 25px;
        border-top: 1px solid #ededed;
        border-bottom: 1px solid #ededed;
        position: relative;
        .corporateList {
            list-style: none;
            color: #999;
            font-weight: 400;
            margin-left: 60px;
            width: 400px;
            position: absolute;
            top: 50px;
            z-index: 999;
            background: #fff;
            li {
                cursor: pointer;
                width: 400px;
                padding: 5px 5px 5px 15px;
                border: 1px solid #ededed;
                background: #fff;
                border-top: none;
                &:nth-of-type(1) {
                    border-top: 1px solid #ededed;
                }
            }
        }
        .showPhone {
            color: rgb(53, 129, 247);
            margin-left: 15px;
            position: relative;
            left: -150px;
        }

        .imgorigin {
            border: 1px solid #ededed;
            padding: 30px;
            width: 100px;
        }
        .img {
            border: 1px solid #ededed;
            width: 100px;
            height: 100px;
        }
        .tips {
            color: red;
            background-color: #fef0f0;
            padding-top: 6px;
            padding-bottom: 6px;
            vertical-align: middle;
            font-weight: 400;
        }
    }
    .bottom-container {
        padding-left: 40px;
        height: 80px;
        line-height: 80px;
        .reAuthenticate {
            background: #eb6100;
            color: #fff;
            border-style: none;
        }
    }
    .danger-txt {
        color: red;
        font-size: 16px;
        font-weight: 800;
        margin-right: 8px;
    }
    .gongsi .el-input__inner {
        // border-radius: 20% !important;
        // width: 800px;
        border: none;
    }
}
.register-btn {
    width: 320px;
    height: 50px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin: 20px auto;
    display: block;
}
.el-upload-list--picture-card .el-upload-list__item {
    width: 60px;
    height: 60px;
}
.el-upload--picture-card {
    width: 60px;
    height: 60px;
    line-height: 60px;
}
</style>